import React, { Component } from "react";
import ReactPlayer from "react-player/lazy";
import "../../styles/Attention/tabview.scss";
import {withRouter} from "react-router-dom";



 class TabView extends Component {
  state ={
    show: false,
    showLoad:false
  }

/* ref */
// scrollLoad = React.createRef();
  /* 点击phone按钮 */
  call = (params) => {
    window.location.href = 'tel://1569792'
  }
/* 跳转至详情页 */
gotoDeteil = (pid)=>{
  console.log(pid);
  // console.log(this);
  /* 点击那一个商品就把序号显示在url上 */
  this.props.history.push( '/attention/detail?cid=' +pid)
}

pullLoad = ()=>{
  console.log(11111);
  this.setState({
    show: true,
    showLoad:true
  })
 setTimeout(()=>{
    this.setState({
    show: false,
    showLoad: false
  })
     },1000)
}

  render() {
    // console.log(this.props.data);
    return (
      <div className={this.state.show?"tabView show":"tabView" } onTouchEnd={this.pullLoad}>
        {/* loading 图 */}
       <div className={this.state.showLoad?"tabVie-show ":"active" }>
        <img alt="" src="http://www.25xt.com/wp-content/uploads/2017/04/%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E4%B8%AD%E7%9A%84%E5%8A%A8%E6%95%88%E8%AE%BE%E8%AE%A1.gif"></img>
        <span>我在努力加载中</span>
       </div>
        {this.props.data.map((v, index) => {
            return (
              (v.p_id === this.props.index || this.props.index === 1) && <section className="content-list" key={index}>
                <div className="content-list-header" onClick={this.gotoDeteil.bind(this,v.p_id)}>
                  <div className="content-list-header-img">
                    <img src="./bitbug_favicon.ico" alt="" />
                  </div>
                  <div className="content-list-header-txt" onClick={this.gotoDeteil.bind(this,v.p_id)}>
                    <b>{v.name}</b>
                    <div className="msg">
                      <strong>{v.price}</strong> <span>{v.site}</span>
                    </div>
                  </div>
                </div>

                <div className="content-list-txt">
                  <b>{v.info}</b>
                </div>
                {/* 此处有多种情况 */}
                {v.type === "1" ? (
                  <div className="content-list-show">
                    <img src={v.image_src} alt="" />
                    <ReactPlayer
                      className="react-player"
                      light={true}
                      width="100%"
                      height="100%"
                      playing={true}
                      controls={true}
                      url="https://wosmedia1.anjukestatic.com/UcSrQpOnMUW/esftransform/35e05f5a-8a95-44f9-8f0c-039d1730d77c.1610011846248.51544-3792914762.mp4"
                    />
                  </div>
                ) : (
                  <div className="content-list-showpic">
                    <img src={v.image_src} alt="" />
                  </div>
                )}
                <div className="content-list-foot">
                  <img src="./bitbug_favicon.ico" alt="" />
                  <div className="content-list-foot-call">
                    <i>{v.msg}</i>
                    <div className="content-list-ico">
                      <div className="phone iconfont"
                       
                      >&#xe626;</div>
                      <div className="call iconfont"
                        onClick={this.call}
                      >&#xe62f;</div>
                    </div>
                  </div>
                </div>
              </section>
            );
          
        })}
        {/* 通过父传子接收到父元素的index */}
        {/* <h1>{this.props.index}</h1> */}
      </div>
    );
  }
}
export default withRouter(TabView)